<!--
 * daterange yyyy-MM-dd
-->

<template>
  <el-cascader
    style="width: 100%"
    ref="cascader"
    v-model="inputVal"
    :options="config.options"
    :disabled="isReadonly"
    @change="change"
    :props="config.config ? config.config : {}"
    placeholder="请选择"
  ></el-cascader>
</template>
<script>
export default {
  props: {
    isReadonly: {
      type: Boolean,
      default: false,
    },
    formData: {
      type: Object,
      default: () => Object.create(null),
    },
    config: {
      type: Object,
      default: () => Object.create(null),
    },
  },
  data() {
    return {
      inputVal: null,
    };
  },
  computed: {
    curVal() {
      return this.formData[this.config.prop] || "";
    },
  },
  watch: {
    curVal: {
      immediate: true,
      deep: true,
      handler(val) {
        this.inputVal = val;
      },
    },
  },
  methods: {
    update(val) {
      //this.formData[this.config.prop] = val;
      this.$set(this.formData, this.config.prop, val);
      this.$emit("update:formData", this.formData);
      this.$emit("change");
    },

    change(val) {
      console.log(val);
      console.log(this.$refs.cascader.getCheckedNodes());

      this.inputVal = val;
      this.update(val);
    },
  },
  created() {},
};
</script>
<style lang="scss" scoped></style>
